import React, { Component } from 'react'
import {Carousel} from "antd-mobile"
// // 1引用 connect是一个函数所以在最下面改造
import { connect } from 'react-redux'
import store from "../../store";
import Style from './CookBook.module.css'
const mapState=state=>({
    list:state.home.list
})

class Swiper extends Component {
constructor(props) {
    super(props);

}
componentWillMount() {
    this.handle()
}

     handle=async ()=>{
         const res=await this.$http.get('/api/list')
            store.dispatch({type:'getlist',data:res.data})
}

    render() {
        return (
            <div>
                <Carousel autoplay={true} infinite
                          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}>
                    {/* <img src={swiper}/> */}
                    {/* 5.便利 因为props.list是空数据会没有东西  先看看报错吗*/}
                    {
                        this.props.list.slice(0, 5).map((value) => <img key={value.id} src={value.img} alt=""/>)

                    }
                </Carousel>
            </div>
        )
    }
}
export default connect(mapState)(Swiper)
